<template>
	<yd-flexbox class="yd-flexboxs longdetail" direction="vertical">
		<!--详情图片轮播-->
		<div class="banner">
			<yd-slider autoplay="3000">
				<yd-slider-item v-for="item,key in house_imgdata" :key="key">
					<yd-lightbox>
						<a>
							<!--<img v-for="item,key in house_imgdata" :key="key" :src="item.imgUrl" />-->
							<yd-lightbox-img v-for="item,key in house_imgdata" :key="key" :src="item.imgUrl"></yd-lightbox-img>
						</a>
					</yd-lightbox>
				</yd-slider-item>
			</yd-slider>
			<!--banner蒙版-->
			<div class="like-icon" @click.stop="selectSort($event,houseinfo.id)">
				<yd-icon name="like" v-if="houseinfo.isCollect==1" color="#FF685D"></yd-icon>
				<yd-icon name="like-outline" v-else color="#fff"></yd-icon>
			</div>
		</div>
		<!--/*房屋标题*/-->
		<div class="line dade-title">
			<div class="dt-h4">
				<div class="dt-money">
					<div v-if="houseinfo.price!=0" style="font-size: .34rem;">¥<span style="font-size: .5rem;">{{houseinfo.price}}</span>/月</div>
					<span class="long-payment" @click="long_payment">付款方式</span>
				</div>
				<p>{{houseinfo.title}}</p>
			</div>
			<div class="house-icon">
				<span v-for="tagsitem,key in houseinfo.tags " :key="key">{{tagsitem}}</span>
			</div>
		</div>
		<!--房屋情况-->
		<div class="line situation">
			<yd-flexbox>
				<yd-flexbox-item class="situation-flex">
					<img class="situation-img" src="../assets/img/rooms.png" />
					<!--<p>一室一厅</p>-->
					<p v-if="houseinfo.house_type==1">整租 </p>
					<p v-if="houseinfo.house_type==2">合租</p>
				</yd-flexbox-item>
				<yd-flexbox-item class="situation-flex">
					<img class="situation-img" src="../assets/img/hall.png" />
					<p>{{houseinfo.room}}室{{houseinfo.hall}}厅{{houseinfo.toilet}}卫</p>
				</yd-flexbox-item>
				<yd-flexbox-item class="situation-flex">
					<img class="situation-img" src="../assets/img/livable.png" />
					<p>宜居{{houseinfo.person_number}}人</p>
				</yd-flexbox-item>
				<yd-flexbox-item class="situation-flex">
					<img class="situation-img" src="../assets/img/square.png" />
					<p>{{houseinfo.acreage}}m²</p>
				</yd-flexbox-item>
			</yd-flexbox>
		</div>

		<!--房源位置house-location-->
		<div class="house-location line">
			<div class="j-title hl-title" @click="amapmarker(center)">
				<yd-icon name="location"></yd-icon>
				<a><span>{{houseinfo.address}}</span></a>
			</div>
			<div class="_map">
				<div class="_m-icon">
					<el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
						<el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
					</el-amap>
				</div>
			</div>
		</div>

		<!--房源描述-->
		<div v-if="houseinfo.house_desc" class="line">
			<yd-accordion>
				<yd-accordion-item title="房源描述" ref="accordion" :auto="true">
					<div>
						{{houseinfo.house_desc}}
					</div>
				</yd-accordion-item>
			</yd-accordion>
			<div class="hi-btn">
				<yd-button size="large" style="background: #ffffff;" @click.native="open">{{isOpen ? '点击收起' : '阅读更多'}}</yd-button>
			</div>
		</div>

		<!--周边环境-->
		<div v-if="houseinfo.environment" class="line">
			<yd-accordion>
				<yd-accordion-item title="周边环境" ref="accordion1" :auto="true">
					<div>
						{{houseinfo.environment}}
					</div>
				</yd-accordion-item>
			</yd-accordion>
			<div class="hi-btn">
				<yd-button size="large" style="background: #ffffff;" @click.native="open1">{{isOpen1 ? '点击收起' : '阅读更多'}}</yd-button>
			</div>
		</div>
		<!--配套设施-->
		<div class="house-supfac line">
			<div class="j-title line">
				<div>配套设施</div>
			</div>
			<div class="hs-content">
				<yd-grids-group :rows="5">
					<yd-grids-item class="hsc-list" v-for="item,key in houseinfo.equipment" :key="key">
						<div slot="else">
							<div class="hscl-icon-box">
								<img class="hscl-icon" v-if="item.grayIcon.indexOf('?')==-1" :src="item.grayIcon+'?imageslim'" />
								<img class="hscl-icon" v-else :src="item.grayIcon" />
							</div>
							<p style="margin-top: .1rem;">{{item.amenityName}}</p>
						</div>
					</yd-grids-item>
				</yd-grids-group>
			</div>
		</div>
		<!--平台保障-->
		<div class="j- line">
			<div class="j-title line">
				<div>平台保障</div>
				<div class="jt-right" @click="reportfun"><img src="../assets/img/images/shortdaell.png" /> 举报</div>
				<!--举报弹框-->
				<div v-show="report" @click="reportclose" class="report-popo">
					<div class="report" @click="eventfun($event)">
						<div class="report-tabitem">
							<span @click="reitem(0)" class="reitem">房源信息有误</span><span @click="reitem(1)" class="reitem">房源已出租</span>
							<span @click="reitem(2)" class="reitem">不是房东</span><span @click="reitem(3)" class="reitem">其他</span>
						</div>
						<textarea class="textarea" placeholder="举报说明" v-model="textarea"></textarea>
						<div class="report-btnbox">
							<button class="report-btn" @click="reportsubmit()">坚决举报</button>
						</div>
					</div>
				</div>
			</div>
			<div class="j-content">
				<yd-grids-group :rows="3">
					<yd-grids-item>
						<a class="jc-list" slot="else">
							<div class="jc-icon"><img src="../assets/img/reality.png" /></div>
							<div slot="text">
								<p>真实房源</p>
								<p>人工审核</p>
							</div>
						</a>
					</yd-grids-item>
					<yd-grids-item>
						<a class="jc-list" slot="else">
							<div class="jc-icon"><img src="../assets/img/creditable.png" /></div>
							<div slot="text">
								<p>房东实名</p>
								<p>更加可靠</p>
							</div>
						</a>
					</yd-grids-item>
					<yd-grids-item>
						<a class="jc-list" slot="else">
							<div class="jc-icon"><img src="../assets/img/safeguard.png" /></div>
							<div slot="text">
								<p>在线支付</p>
								<p>方便快捷</p>
							</div>
						</a>
					</yd-grids-item>
				</yd-grids-group>
			</div>
		</div>
		<!--房间信息-->
		<div class="rent-calendar line">
			<div v-if="houseinfo.room_list" class="j-title rc-title">
				<div>房间信息</div>
			</div>
			<yd-flexbox style="padding: .2rem;box-sizing: border-box;" v-for="item,key in houseinfo.room_list" :key="key">
				<yd-flexbox-item class="my-flexbox-item">{{item.room_title}}</yd-flexbox-item>
				<yd-flexbox-item class="my-flexbox-item" style="color: #e25051;" v-if="item.price!=0">￥{{item.price}}/月</yd-flexbox-item>
				<yd-flexbox-item class="my-flexbox-item" v-if="item.rent_status==1">待出租</yd-flexbox-item>
				<yd-flexbox-item class="my-flexbox-item" v-if="item.rent_status==0">已出租</yd-flexbox-item>
				<yd-flexbox-item v-if="houseinfo.room_id==item.room_id">当前房源</yd-flexbox-item>
				<yd-flexbox-item v-else @click.native="room_idclick(item.room_id)">查看房源</yd-flexbox-item>
			</yd-flexbox>
		</div>
		<!--房东介绍-->
		<div class="landlord line">
			<div class="landlord-portrait">
				<!--<img class="portrait-img" v-if="houseinfo.landlord_img.indexOf('?')==-1" :src="houseinfo.landlord_img+'?imageslim'" />-->
				<img class="portrait-img" :src="houseinfo.landlord_img" />
			</div>
			<div class="landlord-nav">
				<div class="landlord-info">
					<p>{{houseinfo.nick}}</p>
					<p>共有{{houseinfo.houseNum}}套房在出租</p>
				</div>
				<div class="landlord-Arrow">
					<div class="apartment" @click="GOlonghouseMaster(houseinfo.landlord_id)">进入公寓</div>
				</div>
			</div>
		</div>
		<!--推荐房源-->
		<!--<div class="recommend-house line">
			<div class="j-title">
				<div>推荐房源</div>
			</div>
		</div>-->

		<!--订购-->
		<div class="bottom-flex">
			<a @click="setOpenApp('https://apis.zhudd.com/openApp.html')" class="talk-landlord">直聊房东</a>
			<a @click="GOHouseApply()" class="reserve">申请预订</a>
		</div>
	</yd-flexbox>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import commonfun from '../fetch/commonfun'
	export default {
		name: 'longDetails',
		data() {
			var that = this;
			return {
				userId: "",
				token: "",
				content: '',
				textarea: '',
				report: false,
				isScrolling: false,
				isOpen: false,
				isOpen1: false,

				//				isOpen: false,
				rate8: 4,
				tipText: [
					'<span style="color:#282828;">$ 分</span>',
					'<span style="color:#282828;">$ 分 </span>',
					'<span style="color:#282828;">$ 分 </span>',
					'<span style="color:#282828;">$ 分 </span>',
					'<span style="color:#282828;">$ 分</span>'
				],
				source: "web",
				house_id: that.$route.query.houseId,
				type: 2,
				userId: "",
				//				输出参数
				houseinfo: [],
				houseKeeperlist: '',
				zoom: 15,
				center: [1, 1],
				marker: {
					position: [1, 1],
					events: {
						click: () => {
							if(that.mywindow.visible === true) {
								that.mywindow.visible = false
							} else {
								that.mywindow.visible = true
							}
						},
						dragend: (e) => {
							that.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
						}
					},
					visible: true,
					draggable: false
				},
				plugin: {
					pName: 'Scale',
					events: {
						init(instance) {}
					}
				}
			}

		},
		mounted() {

			document.body.style.overflow = "visible";
			document.querySelector("html").style.overflow = "visible";
			var that = this;
			if(sessionStorage.getItem("userinfo") != null) {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
				that.userId = getHiss.id;
				that.token = getHiss.token;
			}
			that.longdetailsdata(that.source, that.house_id, that.type);
		},
		computed: {
			...mapGetters([
				'house_imgdata'
			])

		},
		methods: {
			...mapActions({
				setOpenApp: 'setOpenApp',
				getLongInfo: 'getLongInfo',
				setBaseInfo: 'setBaseInfo',
				
			}),
			GOHouseApply() {
				this.setBaseInfo();
				var houseinfo = {
					houseImg: this.houseinfo.img,
					title: this.houseinfo.title,
					house_type: this.houseinfo.house_type,
					room: this.houseinfo.room,
					hall: this.houseinfo.hall,
					acreage: this.houseinfo.acreage,
					prices: this.houseinfo.price,
					room_id:this.houseinfo.room_id,
					
					year_price: this.houseinfo.year_price,
					half_year_price: this.houseinfo.half_year_price,
					qtr_price: this.houseinfo.qtr_price,
					month_price: this.houseinfo.month_price,

				}
				this.$router.push({
					path: "/LongHouseApply",
					query: {
						houseId: this.house_id,
						houseinfo: JSON.stringify(houseinfo)
					}
				})
			},
			selectSort(e, houseId) {
				if(e.target.className == "yd-icon-like-outline") {
					e.target.className = "yd-icon-like";
					e.target.style.color = "#FF685D"

					let ajaxSign = {
						"source": this.source,
						"token": this.token,
						"userId": this.userId.toString(),
						"houseId": houseId.toString(),
						"type": '1',
						"houseType": '1',
					}
					let ajaxData = api.getAES(ajaxSign);
					api.GetCollectSta(ajaxData)
						.then(res => {
							this.$dialog.toast({
								mes: res.msg,
								timeout: 1000
							});
							if(res.sta == 203) {
								this.$router.push({
									path: "/login"
								})
							}
						})

				} else {

					e.target.className = "yd-icon-like-outline"
					e.target.style.color = "#fff"
					let ajaxSign = {
						"source": this.source,
						"token": this.token,
						"userId": this.userId.toString(),
						"houseId": houseId.toString(),
						"type": '2',
						"houseType": '1',
					}
					let ajaxData = api.getAES(ajaxSign);
					api.GetCollectSta(ajaxData)
						.then(res => {

							this.$dialog.toast({
								mes: res.msg,
								timeout: 1000
							});
							if(res.sta == 203) {
								this.$router.push({
									path: "/login"
								})
							}
						})
				}
			},
			//			去这里
			amapmarker(center) {
				commonfun.amapmarker(center)
			},
			//			举报弹框
			reportfun() {
				var that = this;

				document.body.style.overflow = "hidden";
				document.querySelector("html").style.overflow = "hidden";
				that.report = true;
				that.content = "";
				that.textarea = "";
				$(".reitem").removeClass("tabspan-active")
			},
			//			关闭弹框
			reportclose() {

				var that = this;
				document.body.style.overflow = "visible";
				document.querySelector("html").style.overflow = "visible";
				that.report = false;
			},
			//			举报原因选择
			reitem(i) {

				$(".reitem").eq(i).addClass("tabspan-active");
			},
			//			阻止点击事件冒泡
			eventfun(event) {
				event.cancelBubble = true;
			},
			//			坚决举报
			reportsubmit() {
				var that = this;
				if($(".reitem").hasClass("tabspan-active")) {
					for(var i = 0; i < $(".tabspan-active").length; i++) {
						if(i == $(".tabspan-active").length - 1) {
							that.content += $(".tabspan-active").eq(i).text();
						} else {
							that.content += $(".tabspan-active").eq(i).text() + ",";
						}
					}
				}

				if(that.textarea != "") {

					that.content += "," + that.textarea;
				}
				if(sessionStorage.getItem("userinfo") != null) {
					let getHiss = JSON.parse(sessionStorage.getItem("userinfo"));
					that.token = getHiss.token;
					var ajaxSign = {
						"source": that.source,
						"houseId": that.house_id,
						"token": that.token,
						"content": that.content
					};
					let ajaxData = api.getAES(ajaxSign);
					//				数据调用
					api.GetComplaint(ajaxData)
						.then(res => {
							let ajaxdata = res.result;
							that.$dialog.toast({
								mes: res.msg,
								timeout: 1000
							});
						})

				} else {
					that.$dialog.toast({
						mes: "请登录",
						timeout: 1000
					});
				}
				that.reportclose();
			},
			//			付款方式
			long_payment() {
				var that = this;
				that.$router.push({
					path: "/longDetails_pay",
					query: {
						year_price: that.houseinfo.year_price,
						half_year_price: that.houseinfo.half_year_price,
						qtr_price: that.houseinfo.qtr_price,
						month_price: that.houseinfo.month_price,

						year_cash_pledge: that.houseinfo.year_cash_pledge,
						half_year_cash_pledge: that.houseinfo.half_year_cash_pledge,
						qtr_cash_pledge: that.houseinfo.qtr_cash_pledge,
						month_cash_pledge: that.houseinfo.month_cash_pledge,

						year_service_price: that.houseinfo.year_service_price,
						half_year_service_price: that.houseinfo.half_year_service_price,
						qtr_service_price: that.houseinfo.qtr_service_price,
						month_service_price: that.houseinfo.month_service_price,
					}
				})
			},
			//			折叠面板
			open() {
				var that = this;
				that.isOpen = !that.isOpen;
				if(that.isOpen) {
					that.$refs.accordion.openItem();
				} else {
					that.$refs.accordion.closeItem();
				}
			},
			open1() {
				var that = this;
				that.isOpen1 = !that.isOpen1;
				if(that.isOpen1) {
					that.$refs.accordion1.openItem();
				} else {
					that.$refs.accordion1.closeItem();
				}
			},

			readly_more() {
				var that = this;
				var reasText = that.$refs.reasly_btn.innerText;
				if(reasText == "阅读更多") {
					$(this).parent().siblings().css("height", "auto");
					$(this).html("点击收起");
				} else {
					$(this).parent().siblings().css("height", "2rem");
					$(this).html("阅读更多");
				}
			},
			longdetailsdata(source, house_id, type) {
				var that = this;
				var ajaxSign = {
					"source": source,
					"house_id": house_id.toString(),
					"type": type.toString(),
					"userId": that.userId.toString(),
					"token": that.token,
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetLongInfo(ajaxData)
					.then(res => {
						if(res.sta == -1) {
							this.$dialog.toast({
								mes: res.msg,
								timeout: 1000
							});
							this.$router.go(-1)
						}
						let ajaxdata = res.result;
						for(var i = 0; i < ajaxdata.house_img.length; i++) {
							if(parseInt(ajaxdata.img) == parseInt(ajaxdata.house_img[i].imgId)) {
								ajaxdata.img = ajaxdata.house_img[i].imgUrl
							}

						}
						if(ajaxdata.house_img.length == 0) {
							that.getLongInfo(false)
						} else {
							that.getLongInfo(ajaxdata.house_img)
						}
						that.center = [ajaxdata.lng, ajaxdata.lat]; //加载地图和相关组件
						that.marker.position = [ajaxdata.lng, ajaxdata.lat];
						that.houseinfo = ajaxdata;
						that.houseKeeperlist = that.houseinfo.houseKeeper.list;
						that.$route.meta.title = that.houseinfo.title;
						document.title = that.$route.meta.title;

						that.$nextTick(() => {
							let swipers = $(".yd-slider-wrapper>.yd-slider-item");
							for(let i = 0; i < swipers.length; i++) {
								swipers.eq(i).find("img").eq(i).siblings("img").remove();
							}
						})
					})

			},
			room_idclick(room_id) {
				var that = this;
				$.each(that.houseinfo.room_list, function(i, data) {
					if(room_id == data.room_id) {
						that.houseinfo.room_id = data.room_id;
						that.houseinfo.sex = data.sex;
						that.houseinfo.occupation = data.occupation;
						that.houseinfo.room_title = data.room_title;
						that.houseinfo.rent_status = data.rent_status;
						that.houseinfo.person_number = data.person_number;
						that.houseinfo.month_cash_pledge = data.month_cash_pledge;
						that.houseinfo.qtr_cash_pledge = data.qtr_cash_pledge;
						that.houseinfo.half_year_cash_pledge = data.half_year_cash_pledge;
						that.houseinfo.year_cash_pledge = data.year_cash_pledge;
						that.houseinfo.other_fee = data.other_fee;
						that.houseinfo.month_price = data.month_price;
						that.houseinfo.qtr_price = data.qtr_price;
						that.houseinfo.half_year_price = data.half_year_price;
						that.houseinfo.year_price = data.year_price;
						that.houseinfo.month_service_price = data.month_service_price;
						that.houseinfo.qtr_service_price = data.qtr_service_price;
						that.houseinfo.year_service_price = data.year_service_price;
						that.houseinfo.half_year_service_price = data.half_year_service_price;
						that.houseinfo.price = data.price;
					}
				});
			},

			GOlonghouseMaster(houseMasterId) {
				var that = this;
				that.$router.push({
					path: '/longhouseMaster',
					query: {
						houseMasterId: houseMasterId,
						cityId: that.cityId
					}
				})
			},
		}
	}
</script>

<style>
	.longdetail {
		padding-bottom: .8rem;
		box-sizing: border-box;
		background: #eeeeee;
	}
	
	.longdetail .my-flexbox-item {
		text-align: center;
		padding: .2rem;
		box-sizing: border-box;
	}
	/*下划线*/
	
	.longdetail .line {
		width: 100%;
		margin-bottom: 1px;
		background: #FFFFFF;
	}
	/*banner*/
	
	.longdetail .banner {
		position: relative;
	}
	
	.longdetail .banner a {
		width: 100%;
		height: 5rem;
	}
	
	.longdetail .banner img {
		width: 100%;
		min-height: 100%;
	}
	
	.longdetail .yd-slider-pagination {
		display: none !important;
	}
	/*banner收藏蒙版*/
	
	.longdetail .like-icon {
		z-index: 999;
		position: absolute;
		top: 0;
		right: 0;
		padding: .24rem;
		box-sizing: border-box;
	}
	/*房屋标题*/
	
	.longdetail .dade-title {
		background: #fff;
		width: 100%;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.longdetail .dt-h4 {
		font-size: .42rem;
		line-height: .49rem;
	}
	
	.longdetail .house-icon {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		padding: 0 .2rem 0 0;
		box-sizing: border-box;
		margin-top: .24rem;
	}
	
	.longdetail .house-icon span {
		display: block;
		font-size: .21rem;
		color: #e25051;
		padding: .05rem .09rem;
		border: 1px solid #e25051;
		box-sizing: border-box;
		border-radius: 5px;
		margin-right: .24rem;
	}
	/*付款方式*/
	
	.longdetail .dt-money {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.longdetail .long-payment {
		font-size: .28rem;
		color: #7d7d7d;
		display: flex;
		align-items: center;
	}
	
	.longdetail .long-payment::after {
		content: "";
		display: block;
		width: .17rem;
		height: .17rem;
		border: 1px solid #7D7D7D;
		border-left: none;
		border-bottom: none;
		margin-left: .1rem;
		transform: rotate(45deg);
	}
	/*房屋情况*/
	
	.longdetail .situation {
		width: 100%;
		padding: .2rem 0;
		box-sizing: border-box;
		font-family: "黑体";
	}
	
	.longdetail .situation-flex {
		text-align: center;
		color: #282828;
		font-size: .31rem;
		position: relative;
	}
	
	.longdetail .situation-flex::after {
		content: "";
		display: block;
		width: 1px;
		height: 50%;
		background: #e3e2e2;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	
	.longdetail .situation-flex:last-child::after {
		width: 0;
	}
	
	.longdetail .situation-img {
		max-width: .39rem;
		/*margin-bottom: .24rem;*/
	}
	/*房东介绍*/
	
	.longdetail .landlord {
		display: -webkit-flex;
		display: flex;
		width: 100%;
		background: white;
		padding: .42rem .24rem;
		box-sizing: border-box;
	}
	
	.longdetail .landlord-portrait {
		width: .97rem;
		height: .97rem;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
	}
	
	.longdetail .portrait-img {
		max-width: 100%;
		min-width: 100%;
		min-height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
	}
	
	.longdetail .landlord-nav {
		display: flex;
		width: 90%;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.longdetail .landlord-Arrow img {
		width: .3rem;
	}
	
	.longdetail .landlord-info {
		margin-left: .21rem;
		line-height: .42rem;
	}
	
	.longdetail .landlord-info h4 {
		color: #282828;
		font-size: .35rem;
		font-weight: normal;
	}
	
	.longdetail .landlord-info p {
		font-size: .28rem;
		color: #7d7d7d;
	}
	/*平台保障*/
	
	.longdetail .j- {
		width: 100%;
	}
	
	.longdetail .j-title {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: .35rem;
		padding: .2rem;
		box-sizing: border-box;
	}
	
	.longdetail .j-title img {
		width: .3rem;
	}
	
	.longdetail .jt-right {
		font-size: .25rem;
		display: -webkit-flex;
		display: flex;
		align-items: center;
	}
	/*平台保障内容*/
	
	.longdetail .jc-list {
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		text-align: center;
		color: #282828;
		font-size: .28rem;
	}
	
	.longdetail .jc-icon {
		width: .69rem;
		height: .69rem;
		overflow: hidden;
		margin-right: .1rem;
	}
	
	.longdetail .jc-icon>img {
		width: 100%;
		height: 100%;
	}
	
	.longdetail .jc-list P {
		width: 100%;
	}
	
	.longdetail .yd-grids-3 .yd-grids-item {
		padding: .35rem 0;
		box-sizing: border-box;
	}
	
	.longdetail .yd-grids-3 .yd-grids-item:not(:nth-child(3n)):before,
	.longdetail .yd-grids-item:after,
	.longdetail .yd-grids-3:before,
	.longdetail .yd-grids-5 .yd-grids-item:not(:nth-child(5n)):before,
	.yd-grids-5:before {
		display: none;
	}
	/*举报弹框*/
	
	.longdetail .report-popo {
		z-index: 9999;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
	}
	
	.longdetail .report {
		width: 5rem;
		height: 6.2rem;
		background: #fff;
		margin: 2.1rem auto;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.longdetail .report-tabitem {
		display: flex;
		justify-content: space-between;
		-webkit-flex-wrap: wrap;
	}
	
	.longdetail .report-tabitem span {
		display: block;
		width: 2.05rem;
		height: .6rem;
		line-height: .6rem;
		font-size: .28rem;
		text-align: center;
		border: 1px solid #282828;
		color: #282828;
		box-sizing: border-box;
		margin-bottom: .25rem;
		border-radius: .05rem;
	}
	
	.longdetail .tabspan-active {
		border: 1px solid #e25051 !important;
		color: #e25051 !important;
	}
	
	.longdetail .textarea {
		display: block;
		width: 100%;
		height: 2.9rem;
		border-radius: .05rem;
		font-size: .28rem;
		border: 1px solid #282828;
		padding: .3em;
		box-sizing: border-box;
	}
	
	.longdetail .report-btnbox {
		width: 100%;
		text-align: center;
	}
	
	.longdetail .report-btn {
		border: none;
		width: 4rem;
		height: .9rem;
		background: #E25051;
		color: #fff;
		border-radius: .05rem;
		margin: .22rem auto;
	}
	/*房源描述*/
	
	.longdetail .hi-content {
		padding: 0 .2rem;
		box-sizing: border-box;
	}
	
	.longdetail .hi-text {
		width: 100%;
		height: 2rem;
		overflow-y: auto;
	}
	
	.longdetail .hi-btn {
		text-align: center;
		padding: .42rem 0;
		box-sizing: border-box !important;
		background: #fff !important;
	}
	
	.longdetail .hi-btn>button {
		border: none !important;
		padding: .05rem .15rem !important;
		box-sizing: border-box !important;
		color: #E25051 !important;
		border: 1px solid #e25051 !important;
		border-radius: 1px !important;
		background: none !important;
		height: initial !important;
		width: initial !important;
		display: initial !important;
		font-size: initial !important;
		height: initial !important;
		margin-top: initial !important;
		font-size: .28rem !important;
	}
	
	.longdetail .yd-accordion-title-full span {
		font-size: .35rem !important;
	}
	
	.longdetail .yd-accordion-content {
		min-height: 1.74rem;
		padding: 0 .24rem !important;
		box-sizing: border-box !important;
		letter-spacing: .01rem;
		font-size: .28rem;
		line-height: .42rem;
		color: #7D7D7D;
	}
	
	.longdetail .yd-accordion-head-arrow.yd-accordion-rotated:after,
	.longdetail .yd-accordion-head:after,
	.longdetail .yd-accordion-content:after,
	.longdetail .yd-accordion-head-arrow:after {
		display: none !important;
	}
	/*房源位置*/
	
	.longdetail ._map {
		position: relative;
	}
	
	.longdetail ._m-icon {
		height: 4.17rem;
		width: 100%;
	}
	
	.longdetail ._m-icon>img {
		max-height: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	
	.longdetail ._map-popoper {
		position: absolute;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: .62rem;
		line-height: .62rem;
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: .175rem;
		padding: 0 .2rem;
		box-sizing: border-box;
	}
	
	.longdetail ._mp-left>img {
		width: .3rem;
		height: .4rem;
	}
	
	.longdetail .house-location {
		padding-bottom: .34rem;
		box-sizing: border-box;
		color: #282828;
	}
	
	.longdetail .hl-title {
		font-size: .35rem;
		justify-content: initial;
		padding: .4rem .24rem;
	}
	/*配套设施*/
	
	.longdetail .hs-content {
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.longdetail .hscl-icon-box {
		width: .54rem;
		height: .5rem;
		margin: auto;
	}
	
	.longdetail .hscl-icon {
		max-width: 100%;
		max-height: 100%;
		color: #282828;
		font-size: .175rem;
	}
	
	.longdetail .yd-grids-4 {
		padding: 0 .35rem .35rem .35rem;
		box-sizing: border-box;
	}
	
	.longdetail .hsc-list {
		font-size: .24rem;
		text-align: center;
		padding: .26rem 0;
	}
	
	.longdetail .yd-grids-4:before {
		display: none;
	}
	
	.longdetail .yd-grids-4 .yd-grids-item:not(:nth-child(4n)):before {
		display: none;
	}
	/*租房日历*/
	
	.longdetail .rc-title {
		justify-content: flex-start;
	}
	
	.longdetail .discount-box {
		display: -webkit-flex;
		display: flex;
	}
	
	.longdetail .rent-discount {
		display: block;
		font-size: .175rem;
		color: #e25051;
		padding-left: .25rem;
		box-sizing: border-box;
	}
	/*交易规则*/
	
	.longdetail .tr-content {
		padding: .2rem;
		box-sizing: border-box;
	}
	
	.longdetail .tr-content span {
		display: block;
	}
	
	.longdetail .trc-list {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		-webkit-align-items: center;
		font-size: .2rem;
		margin-bottom: .7rem;
	}
	
	.longdetail .trc-left {
		flex: 1.5 1 auto;
		padding-left: .25rem;
		box-sizing: border-box;
		color: #282828;
	}
	
	.longdetail .trc-right {
		flex: 2 1 auto;
		color: #666;
	}
	
	.longdetail .trcl-last {
		justify-content: space-between;
	}
	
	.longdetail .trcl-last .trc-left,
	.longdetail .trcl-last .trc-right {
		flex: inherit;
	}
	
	.longdetail .trcr-more {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		-webkit-align-items: center;
		color: #e25051;
	}
	
	.longdetail .more-icon {
		width: .16rem !important;
		height: .3rem;
		margin-left: .125rem;
	}
	/*订购*/
	
	.longdetail .bottom-flex {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: -webkit-flex;
		display: flex;
		z-index: 1000;
	}
	
	.longdetail .bottom-flex a {
		width: 50%;
		text-align: center;
		padding: .21rem;
		box-sizing: border-box;
		color: #fff;
		font-size: .35rem;
	}
	
	.longdetail .talk-landlord {
		background: #e25051;
	}
	
	.longdetail .reserve {
		background: #d34142;
	}
</style>